<template>
  <dl class="introduce">
    <dd v-for="(item, index) in list" :key="index">
      <span>{{ $t(item.title) }}</span>
      <NuxtImg :src="item.img" alt="" />
      <p>{{ $t(item.text) }}</p>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { reactive } from "vue";

let list = reactive<{
  img: string,
  title: string,
  text: string
}[]>([
  {
    img: "/img/bb3.png",
    title: "language.business.ititle1",
    text: "language.business.itext1",
  },
  {
    img: "/img/bb4.png",
    title: "language.business.ititle2",
    text: "language.business.itext2",
  },
  {
    img: "/img/bb5.png",
    title: "language.business.ititle3",
    text: "language.business.itext3",
  },
]);
</script>

<style scoped lang="scss">
.introduce {
  position: relative;
  color: #fff;
  width: 100%;

  dd {
    width: 100%;
    background-color: rgb(39, 43, 47);
    padding: 10px 22px 16px;
    box-sizing: border-box;
    background-color: #272b2f;
    border: 1px solid #272b2f;
    border-radius: 10px;
    margin-bottom: 15px;

    img {
      width: 100%;
      margin: 15px 0;
    }

    span {
      font-size: 20px;
      color: #fff;
    }

    p {
      font-size: 12px;
      color: #b5bac8;
    }
  }
}
</style>
